import React, { Component, useEffect, useState } from 'react'
import '../assets/css/detail.css'
import { Getgoodsinfo, Cartadd } from '../request/api'

import { useLocation, Link, useNavigate } from 'react-router-dom'
export default function Detail() {
    let [list, setlist] = useState([])
    const { state } = useLocation()
    const navigate = useNavigate()
    const id = state.id
    console.log(id, '222')
    useEffect(() => {
        Getgoodsinfo({ id }).then(res => {
            console.log(res, '1111');
            if (res.code == 200) {
                setlist(res.list)
            }
            console.log(list, '0000');
        })
    }, [list])
    function gocart() {
        if (sessionStorage.getItem('islogin')) {
            console.log(JSON.parse(sessionStorage.getItem('islogin')));
            console.log(state.id);
            console.log(state.type);
            Cartadd({
                uid: JSON.parse(sessionStorage.getItem('islogin')).uid,
                type: state.type,
                goodsid: state.id,
                num: 1
            }).then(res => {
                // console.log(res, '4444444444444444');
                if (res.code == 200) {
                    alert(res.msg)
                    navigate('/index/cart')
                }
            })
        }
        else {
            alert('请先登录')
            navigate('/login')
        }
    }

    // 点击跳转订单页
    const cliIndent = () => {
        navigate('/order')
        sessionStorage.setItem("goodsList", JSON.stringify(list))
    }
    return (
        <div>
            {
                list.map((item, index) => {
                    return (
                        <div key={item.id}>
                            <header>
                                <div className="box_top">
                                    <span className="iconfont icon-zuojiantou"></span>
                                    <p>{item.goodsname}...</p>
                                    <div className="gd">
                                        <span className="iconfont icon-xiaochengxu-gengduo"></span>
                                        <div></div>
                                        <span className="iconfont icon-xiaoyuandian"></span>
                                    </div>
                                </div>
                                <div className="menu">
                                    <a href="#"><span>商品</span></a>
                                    <a href="#"><span>评价</span></a>
                                    <a href="#"><span>详情</span></a>
                                    <a href="#"><span>推荐</span></a>
                                </div>
                            </header>
                            <div className="banner1">
                                <img src={item.img} alt="" />

                            </div>
                            <article>
                                <div className="title1">
                                    <span>￥</span>
                                    <span>{item.price}</span>
                                    <strike><i className="iconfont icon-jiage1">{item.market_price}</i></strike>
                                    <span className="text">
                                        <a href="#"><span className="iconfont icon-xingxing"></span>
                                            <span>收藏</span></a>
                                    </span>
                                </div>
                                <h2>{item.name}</h2>
                                <p>敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</p>
                                <div className="text2">11.11限时299元起</div>
                                <div className="text3">此商品于2020-11-11,00点结束闪购特卖<a href="#">查看</a></div>

                                <div className="main">
                                    <div>
                                        <h3>领券</h3>

                                    </div>
                                    <div className="right">
                                        <a href="#">
                                            <div><span>300</span></div>
                                        </a>
                                        <a href="#">
                                            <div><span>50</span></div>
                                        </a>
                                        <a href="#">
                                            <div><span>10</span></div>
                                        </a>
                                    </div>
                                </div>
                                <b className="main2">
                                    <h3>分期</h3>
                                    <div className="right2">
                                        <span>可选3/6/12期</span>
                                        <span>&nbsp;&nbsp;</span>
                                    </div>
                                </b>
                            </article>
                            <footer>
                                <ul>
                                    <li><a href="#" className="a">
                                        <span className="iconfont icon-kefu"></span>
                                        <span>客服</span>
                                    </a></li>
                                    <li><a href="#" className="a">
                                        <span className="iconfont icon-dianpu"></span>
                                        <span>店铺</span>
                                    </a></li>
                                    <li><a href="#" className="a">
                                        <span className="iconfont icon-gouwuch"></span>
                                        <span>购物车</span>
                                    </a></li>
                                    <li>
                                        <div className="b d">
                                            <span onClick={gocart.bind(this)}>加入购物车</span>
                                        </div>
                                    </li>
                                    <li>
                                        <div className="b d" id='dd'>
                                            <span onClick={() => cliIndent()}>立即购买</span>
                                        </div>
                                    </li>
                                </ul>
                            </footer>
                        </div>
                    )
                })
            }
        </div>
    )

}

